<template>
  <a-modal
    :title="title"
    :width="780"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading">
      <img class="code-img" :src="imgSrc" />
      <a-descriptions v-if="!isBind" class="binding-info" title="绑定信息">
        <div><a-button type="primary" @click="handleRefresh"> 暂未绑定，扫码绑定后点击刷新 </a-button></div>
      </a-descriptions>
      <a-descriptions v-if="isBind" class="binding-info" title="绑定信息" layout="vertical">
        <a-descriptions-item label="微信昵称"> {{nickName}} </a-descriptions-item>
        <a-descriptions-item label="微信头像">
          <a-avatar :size="64" :src="avatar" />
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import * as Api from '@/api/appointment/employee'
import { SelectImage, Ueditor } from '@/components'
import { arrayBufferToBase64Img } from '@/utils/util'

export default {
  components: {
    SelectImage,
    Ueditor,
  },
  data() {
    return {
      // 对话框标题
      title: '绑定用户，请使用微信扫码',
      // 标签布局属性
      labelCol: {
        span: 7,
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13,
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 图片资源
      imgSrc: '',
      // 是否已绑定
      isBind: false,
      // 当前员工id
      employeeId: 0,
      // 当前员工信息
      employee: {}
    }
  },

  computed: {
    nickName() {
      return this.employee?.user?.wx_nick_name
    },

    avatar() {
      return this.employee?.user?.avatar_url
    }
  },

  created() {},

  methods: {
    /**
     * 显示对话框
     */
    bind(employeeId) {
      console.log(employeeId)
      // 显示窗口
      this.visible = true
      // 记录当前员工ID
      this.employeeId = employeeId
      // 获取小程序码
      this.getCode(employeeId)
      // 获取该员工的绑定信息
      this.getBindingInfo(employeeId)
    },

    /**
     * 获取小程序码
     */
    getCode(employeeId) {
      this.confirmLoading = true
      Api.code({
        employeeId,
      })
        .then((res) => {
          this.imgSrc = arrayBufferToBase64Img(res)
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },

    /**
     * 获取该员工的绑定信息
     */
    getBindingInfo(employeeId) {
      Api.binding({
        employeeId,
      })
        .then((res) => {
          console.log(res)
          const employee = res.data.employee
          if(employee.user_id > 0) {
            this.isBind = true
          }
          this.employee = employee
        })
    },

    /**
     * 刷新绑定信息
     */
    handleRefresh() {
      this.getBindingInfo(this.employeeId)
    },

    /**
     * 关闭对话框事件
     */
    handleCancel() {
      this.visible = false
      // 重置信息
      this.reset();
    },

    reset() {
      // 图片资源
      this.imgSrc = ''
      // 是否已绑定
      this.isBind = false
      // 当前员工id
      this.employeeId = 0
      // 当前员工信息
      this.employee = {}
    }
  },
}
</script>

<style scoped lan="scss">
.ant-input-number {
  width: 200px !important;
}

.code-img {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.binding-info {
  margin-top: 50px;
}
</style>